<!--电子合同-->
<template>
  <a-card
    style="height: 100%; width: 100%; display: flex; flex-direction: column"
    :bodyStyle="{flex: 1,height: 0, padding: '24px'}"
  >
    <template #title>
<!--      <cu-icon class="icon-primary" type="org-hetong" />-->
      近7天物业收费趋势
    </template>
    <template #extra>
      <a-button
        type="link"
        size="small"
        @click="JumpToPage">更多&nbsp;&gt;</a-button>
    </template>
    <a-spin :spinning="spinning">
      <div id="box"> </div>
    </a-spin>
  </a-card>
</template>
<script>
import {
  defineComponent,
  ref,
  computed,
  watch,
  onMounted,
  reactive,
  nextTick, toRefs,onUnmounted
} from "vue";
import {Empty, message, Modal, Progress} from "ant-design-vue";
import request from "../../../common/utils/request";
import utils from "@/common/utils/utils";
import { Chart } from '@antv/g2';
export default defineComponent({
  name: "PropertyFeeTrend",
  components: {
  },
  setup(props, context) {

    const state = reactive({
      spinning: false,
    })

    const JumpToPage = () => {
      let href = window.location.href
      let ref = href.substr(0 , href.indexOf("#"))
      window.location.href = ref + '#/bill/billList'
    }

    const PropertyFees = {}

    const goMore = () => {
      state.spinning = true;
      PropertyFees.chart = new Chart({
        container: 'box',
        autoFit: true,
        appendPadding: [40, 10, 0, 15],
        height:280,
      });
      /*PropertyFees.chart.annotation().text({
        top: true,
        // position: ['start', 'end'],
        content: '单位：元',
        style: {
          fill: '#8c8c8c',
          fontWeight: 300,
          fontSize: '12',
        },
        offsetY: -250,
        offsetX: -25,
      })*/
      PropertyFees.chart.scale('total', {
        nice: true,
        min: 0,
      });

      PropertyFees.chart.axis("key", {
        label: {
          rotate: -1,
          offset: 35,
        },
        tickLine: null,
      });

      PropertyFees.chart.axis('total', {
        grid:{
          line:{
            type:"line",
            style:{
              stroke:"#8c8c8c",
              lineDash:[1,3],//虚线
            }
          },
        },
      });
      PropertyFees.chart.tooltip({
        showMarkers: false,
        showTitle:false
      });
      PropertyFees.chart.interaction('active-region');

      PropertyFees.chart.interval()
          .style({ radius: [20, 20, 0, 0] })
          .label("total", { content: (originData) => { return originData["total"] },
        style: {
          fill: '#8c8c8c',
          fontWeight: 400,
        },
        position: 'top',
      }).position('key*total')
          .size(20)
          .tooltip("key*total", (item, percent) => {
            return {
              name: '金额',
              value: percent + '元',
            };
          })


      request
          .get("/org", "/workbench/cash_last_7_days")
          .then((res) => {
            let dataes = []
            for (let i = 0; i < res.list.length; i++) {
              dataes.push({
                key : res.list[i].date ,
                name : res.list[i].name ,
                total : res.list[i].total ,
              })
            }

            PropertyFees.chart.changeData(dataes);
            PropertyFees.chart.render();
            state.spinning = false;
          }).catch((err) => {
        state.spinning = false;
      });

      // 渲染可视化
      PropertyFees.chart.render();
    };

    onMounted(() => {
     goMore()
    });

    onUnmounted(()=>{
      if (PropertyFees.chart) {
        PropertyFees.chart.destroy();
      }
    })

    return {
      ...toRefs(state),
      goMore,
      PropertyFees,
      JumpToPage,
    };
  },
});
</script>

<style lang="less" scoped>
:deep(.ant-progress-text) {
  color: #666;
}
.box {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100%;

}
.icon-primary {
  color: @primary-color;
  font-size: 18px;
}
:deep(.ant-spin-nested-loading) {
  height: 100%;
}
:deep(.ant-spin-container) {
  height: 100%;
}
</style>